D8 - CSS - 選擇器們 - 偽類（pseudo-class） - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 8

Modern Web

GPT 救救我！菜雞小海獺的前端成長之旅系列第 8 篇

D8 - CSS - 選擇器們 - 偽類（pseudo-class）

15th鐵人賽

CatBoxy

團隊哥布林殺手

2023-09-09 07:20:38

307 瀏覽

分享至

偽類（pseudo-class）

偽類也是一種選擇器，作用是選擇指定元素的特定狀態。一些偽類通常可以增加使用者體驗（User Experience，UX），例如使用者的滑鼠懸停時在指定元素上時（:hover）、區分連結是否已造訪過（:link & :visited）、用戶點擊或用 Tab 鍵選擇某 element 時的樣式（:focus）等等。

那怎麼知道誰是偽類咧？偽類的開頭都是一個冒號，後面接上屬性，例如上一段提到的 :hover、:link 等等。

偽類的類別

輸入／編輯（Input pseudo-classes）
- :read-only：只可讀取不可編輯
- :disabled：選取「處在禁用狀態」的元素
位置（Location pseudo-classes）
- :target：跳轉到點擊處 href=#id 所指向的 id 位置。
（樹狀）結構下的偽類（Tree-structural pseudo-classes）
- :nth-child
  - :nth-child(n)：選取第 n 個元素。
  - :nth-child(an+b)：自由搭配 a 與 b，以選取複數元素用。a&b 都是數字，a、b 可以是 0，n=0、1、2、...
- :nth-of-type(n)：選取同層中的第 n 個指定元素
  - 例：div:nth-of-type(5)，指的是同層的第五個 div
使用者行為（User action pseudo-classes）
- :hover：使用者滑鼠懸停在指定目標上。
  - 觸控螢幕下使用 hover 可能會有問題。
  - 需注意的使用順序：先 :link → :visited → :hover → :active 後
- :active：（瀏覽器會偵測）元素被使用者「啟動」時的狀態，這個狀態指的是==使用者按下滑鼠左鍵和鬆開左鍵之間的時間==。
  - 通常用在 a 跟 button 上
  - 若有左手專用的滑鼠，那（primary mouse button）就會是右鍵
- :focus：指的是當前的「焦點」，這個焦點的觸發，可以由使用者點擊的、也可以是用 tab 選取的。
  - 常用在 button, input 等
功能性（Functional pseudo-classes）
- 以逗號（,）連接的選擇器們（selector list）作為參數
  - :not：使用時要注意，會有一些奇怪的錯誤／情況
  - :has()
- 可包容錯誤的 selectors（forgiving selector list）作為參數。單一 selector 錯誤，不會影響到其他 selector 的解析。
  - :is()：可以用來簡化一堆 selector
    - 會受 selector 的優先級影響
    - 多層使用下有點像陣列的配對(?)
    - 不接受含有偽元素的 selector
  - :where()

Fig. 1. 來實作一下吧!

範例 code 們

<h1>常見的偽類 psuedo-class 練習</h1>
<div class="box">
  <h2>輸入／編輯類</h2>
  <h3>:read-only</h3>
  <div class="inner-box">
    <p class="read-only">我會變 aquamarine 色</p>
  </div>
  <h3>:disabled</h3>
  <div class="inner-box">
    <div>
      <label>喜歡的動物：
        <select name="animals">
          <option>請選擇</option>
          <option value="lion">獅子</option>
          <option value="otter" selected>獺</option>
        </select>
      </label>
    </div>
    <div>
      <label>喜歡的水果：
        <select name="fruits" disabled>
          <option>請選擇</option>
          <option value="banana">香蕉</option>
          <option value="watermelon">西瓜</option>
        </select>
      </label>
    </div>
  </div>
  <h2>位置類</h2>
  <h3>:target</h3>
  <div class="inner-box">
    <div>
      <ul>
        <li>
          <a href="#para">去 p</a>
        </li>
        <li>
          <a href="#block">去 div</a>
        </li>
        <li>
          <a href="notdefined">找不到目標</a>
        </li>
      </ul>
    </div>
    <div>
      <p id="para">我是一個 p</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, nemo accusantium suscipit optio rem
        dolores odio repudiandae! Molestiae iusto delectus animi numquam perferendis? Aspernatur repudiandae, quae
        voluptas dolore eos ipsa?</p>
      <div id="block">我是一個div</div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, nemo accusantium suscipit optio rem
        dolores odio repudiandae! Molestiae iusto delectus animi numquam perferendis? Aspernatur repudiandae, quae
        voluptas dolore eos ipsa?</p>
    </div>
  </div>
  <h2>結構用</h2>
  <h3>:nth-child(n)</h3>
  <h4><code>.test-nth div:nth-child(3)</code></h4>
  <div class="inner-box test-nth">
    <div>
      <p>一段話</p>
    </div>
    <div>
      <p>一段話</p>
    </div>
    <div>
      <p><code>.test-nth div:nth-child(3) { background: red; }</code></p>
    </div>
  </div>
  <h4><code>.test-nth>ul li:nth-child(2)</code></h4>
  <div class="inner-box test-nth">
    <ul>
      <li>幾個字</li>
      <li><code>.test-nth div:nth-child(2) { background: lightgreen; }</code></li>
      <li>幾個字</li>
      <li>幾個字</li>
    </ul>
  </div>
  <h3>:nth-child(an+b)</h3>
  <h4>2n+1=座號，座號符合 1, 3, 5, 7, ... 底色就會變</h4>
  <div class="inner-box test-nth-anb">
    <p>n=0, 2*0+1=1／nth 的座號：1</p>
    <p>n=1, 2*1+1=3／nth 的座號：2</p>
    <p>n=2, 2*2+1=5／nth 的座號：3</p>
    <p>n=3, 2*3+1=7／nth 的座號：4</p>
    <p>n=4, 2*4+1=9／nth 的座號：5</p>
    <p>n=5, 2*5+1=11／nth 的座號：6</p>
    <p>n=6, 2*6+1=13／nth 的座號：7</p>
    <p>n=7, 2*7+1=15／nth 的座號：8</p>
    <p>n=8, 2*8+1=17／nth 的座號：9</p>
    <p>n=9, 2*9+1=19／nth 的座號：10</p>
  </div>
  <h4>2n+0=座號，座號符合 2, 4, 6, ... 底色就會變</h4>
  <div class="inner-box test-nth-anzero">
    <p>n=0, 2*0+0=0／nth 的座號：1</p>
    <p>n=1, 2*1+0=2／nth 的座號：2</p>
    <p>n=2, 2*2+0=4／nth 的座號：3</p>
    <p>n=3, 2*3+0=6／nth 的座號：4</p>
    <p>n=4, 2*4+0=8／nth 的座號：5</p>
    <p>n=5, 2*5+0=10／nth 的座號：6</p>
    <p>n=6, 2*6+0=12／nth 的座號：7</p>
    <p>n=6, 2*7+0=14／nth 的座號：8</p>
    <p>n=6, 2*8+0=16／nth 的座號：9</p>
  </div>
  <h4>4n+1=座號，座號符合 1, 5, 9, ... 底色就會變</h4>
  <div class="inner-box test-nth-anfour">
    <p>n=0, 4*0+1=1／nth 的座號：1</p>
    <p>n=1, 4*1+1=5／nth 的座號：2</p>
    <p>n=2, 4*2+1=9／nth 的座號：3</p>
    <p>n=3, 4*3+1=13／nth 的座號：4</p>
    <p>n=4, 4*4+1=8／nth 的座號：5</p>
    <p>n=5, 4*5+1=10／nth 的座號：6</p>
    <p>n=6, 4*6+1=12／nth 的座號：7</p>
    <p>n=6, 4*7+1=14／nth 的座號：8</p>
    <p>n=6, 4*8+1=16／nth 的座號：9</p>
  </div>
  <span>也可以到 codepen 試試
    <a href="https://codepen.io/nekoboxy/pen/xxmbQvL?editors=1100" target="_blank">點我</a>
  </span>
  <h2>結構類</h2>
  <h3>:hover</h3>
  <div class="inner-box">
    <button type="button" class="test-hover">滑鼠來</button>
  </div>
  <h3>:active</h3>
  <div class="inner-box">
    <span>這是一個結合 <code>:hover</code> 跟 <code>:active</code> 的<a>例子</a>，點看看前面黃底色的字吧</span>
  </div>
  <h3>:focus</h3>
  <div class="inner-box">
    <input type="text" placeholder="點我嘛~">
    <div class="test-focus">
      <label>喜歡的動物：
        <select name="animals">
          <option>請選擇</option>
          <option value="lion">獅子</option>
          <option value="otter" selected>獺</option>
        </select>
      </label>
    </div>
  </div>
  <h2>功能類</h2>
  <h3>:is()</h3>
  <div class="inner-box test-is">
    <div class="box1">
      <h5>嗨</h5>
      <div class="box2">
        <h5>嗨</h5>
        <div class="box3">
          <h5>嗨</h5>
        </div>
      </div>
    </div>
  </div>
</div>

/* 下面兩個結果一樣 */
p[class="read-only"]:read-only {
  background-color: aquamarine;
}

/* .read-only:read-only {
  background-color: aquamarine;
} */

select:disabled {
  background-color: rgb(46, 46, 46);
  color: azure;
}

/* target */
p:target {
  background-color: gold;
}

/* 結合 ::before */
/* p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
} */

div:target {
  color: red;
  font-weight: 900;
}

/* nth-child*/
/* 選在 .test-nth 下的第二個 div */
.test-nth div:nth-child(3) {
  background: red;
}

/* 選在 .test-nth 下的 ul 中的第二個 li */
.test-nth > ul li:nth-child(2) {
  background: lightgreen;
}

/* 選取任何子層內的第三個項目 */
:nth-child(3) {
  background: yellow;
}

/* 在 指定 class 下的 p，符合條件的皆選取 */
.test-nth-anb p:nth-child(2n + 1),
.test-nth-anzero p:nth-child(2n + 0),
.test-nth-anfour p:nth-child(4n + 1) {
  background-color: rgb(151, 82, 101);
  color: white;
}

.test-hover:hover {
  background-color: brown;
  color: white;
}

.inner-box > span:hover {
  background-color: aquamarine;
}

span > a:active {
  color: aliceblue;
  font-weight: 900;
  background-color: darkgreen;
}

.inner-box > input:focus {
  background-color: aquamarine;
}

.test-focus select:focus {
  background-color: burlywood;
}

.test-is :is(.box1, .box2, .box3) h5 {
  background-color: darkgreen;
  color: white;
}

備註：pseudo-class 種類繁多，上面僅列出部分，若有其他需求，可自行上 MDN 查找。

下一篇文章的主題是偽元素

ps 雖然不知道是哪位大大收藏的，但您激勵了這隻菜雞獺，非常感謝您!! m(_ _)m

參考資料

Pseudo-classes and pseudo-elements - Learn web development | MDN，https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
伪类 - CSS：层叠样式表 | MDN，https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
CSS Pseudo-classes，https://www.w3schools.com/css/css_pseudo_classes.asp
CSS 选择器 - CSS：层叠样式表 | MDN，https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_selectors#%E5%9F%BA%E6%9C%AC%E9%80%89%E6%8B%A9%E5%99%A8
Pseudo-classes - CSS: Cascading Style Sheets | MDN，https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#linguistic_pseudo-classes
:nth-child - CSS：层叠样式表 | MDN，https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child
CSS :nth-child() Selector，https://www.w3schools.com/cssref/sel_nth-child.php